<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据已知节点查找其他节点</title>
    <style>
        .selected{
            background: red;
        }
    </style>
    <script>
        function f1(){
            let i3 = document.getElementById("i3");
            // 可以通过DOM对象.className="class选择器名"用于赋予css样式
            i3.className = "selected";
        }
        function f2(){
            let i3 = document.getElementById("i3");
            i3.parentNode.className="selected";
        }
        function fn(obj){
            obj.className="selected";
        }

    </script>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li id="i3">item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
<!--    此处是立即执行代码，上面的是在方法体中，只有方法被加载才执行-->
    // 在操作i3节点的时候,要保证页面中已经加载了i3
    // 因此,这行代码必须处于i3后面
    let i3 = document.getElementById("i3")
</script>
<button onclick="fn(i3)">当前节点</button>
<button onclick="fn(i3.parentNode)">父节点</button>
<!--空字符串也是文本-->
<button onclick="fn(i3.previousSibling.previousSibling)">上一个节点</button>
<button onclick="fn(i3.nextSibling.nextSibling)">下一个节点</button>
<button onclick="fn(i3.parentNode.firstChild.nextSibling)">第一个节点</button>
<button onclick="fn(i3.parentNode.lastChild.previousSibling)">最后一个节点</button>
</body>
</html>